<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style>
		#header {
			height: 1.28rem;
			line-height: 0.8rem;
			background: #fff;
			text-align: center;
			font-size: .32rem;
			padding: 0 0.2rem;
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
			position: relative;
		}

		#header:after {
			height: 1px;
			background-color: #dddddd;
			display: block;
			content: '';
			position: absolute;
			top: auto;
			left: 0;
			right: auto;
			bottom: 0;
			width: 100%;
			z-index: 2;
			-webkit-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
			pointer-events: none;
		}

		#header .left {
			font-size: 0.32rem;
			text-align: left;
			color:#000;
		}

		.aui-bar-nav .aui-btn .aui-iconfont{
			font-size: 0.32rem;
			color:#000;
		}

		#header .left i {
			font-size: 0.32rem;
		}

		#header .right {
			text-align: right;
		}

		#header .right i {
			font-size: 0.32rem;
		}
	</style>
</head>

<body style="padding-bottom:2rem;">
	<header id="header" class="flex-box-x">
			<div class="col-xs-x left text-left"><i class="aui-iconfont aui-icon-left" tapmode onclick="api.closeWin();"></i></div>
			<div class="center" id="title">{{nickname}}</div>
			<div class="col-xs-x right"></div>
	</header>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript">
		var toAvatar,app

		app = new Vue({
			el: '#header',
			data: {
				token:'',
				user_id:'',
				avatar:'',
				nickname:''
			},
			methods: {
				init: function(header_h){
					showProgress()
					api.ajax({
						url: window.getUserInfo,// 操作详情查看 OthersController.php     getUserInfo方法
						method: 'post',
						data: {
							values: {
								token: app.token,//用户token 用户安全校验
								user_id:api.pageParam.user_id //上个页面带过来的参数（商家/客服的用户ID）
							}
						}
					}, function(ret, err) {
						hideProgress()
						if (ret) {
							app.user_id = ret.data.user_id;//商家/客服的用户ID
							app.avatar = ret.data.avatar;//商家/客服的头像
							app.nickname = ret.data.store_name;//商家/客服的昵称
							//打开chatroom-con.html页面 并将数据传过去
							api.openFrame({
								name: 'chat',
								url: 'chatroom-con.html',
								bounces: true,
								rect: {
									x: 0,
									y: header_h,
									w: 'auto',
									h: api.winHeight - header_h
								},
								pageParam: {
									toId: app.user_id,
									toAvatar: app.avatar
								}
							})
						} else {
							toast('网络异常，请检查网络')
						}
					});
				}
			}
		});
		weihankeji = function() {
			var header_h = $api.offset($api.byId('header')).h;
			
			//已登录用户的token
			app.token = api.getPrefs({
				sync: true,
				key: 'token'
			});

			app.init(header_h);

		}
	</script>
</body>

</html>
